<!--首页头部部分-->
<template>
    <div>
        <div class="headerTop">
          <ul class="all">
              <li class="left">
                  <van-icon name="browsing-history-o" />
              </li>
              <li class="right">
                     <van-search
                             shape="round"
                             background="#FFFFFF"
                             placeholder="请输入搜索关键词"
                             @click="changeUrl"
                     />
              </li>
          </ul>

        </div>
    </div>
</template>

<script>
    export default {
        name: "Header.vue",
        methods:{
            changeUrl(){
                this.$router.push("/search");
            },
        }
    }
</script>

<style scoped lang="less">
.headerTop {
    height: 45px;
    background-color: #FFFFFF;
    border-bottom:1px solid #eaeaea;
  .all {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

  }
    li {
        height: 45px;
        text-align: center;
    }
    .left {
        width: 40px;
        line-height: 45px;
        font-size: 24px;
        color: #409EFF;

    }
    .right {
        width: calc(100% - 40px);
    }
}
    /deep/ .van-search {
        height: 45px;
    }

</style>